<div class="classify_container">
	<div class="row">
		<div class="col-md-2">
			<button class="btn btn-default add" type="submit" data-toggle="modal" data-target="#exampleModal" >新增</button>
		</div>
	</div>
	<div class="row">
		<table class="table table-hover">
		   <thead>
			   <th>序号</th>
			   <th>名称</th>
			   <th>排序号</th>
			   <th>父栏目</th>
			   <th>描述</th>
			   <th>操作</th>
		   </thead>
		   <tbody>
			   <!-- <tr style="text-align: left;">
				   <td>1</td>
				   <td>校园新闻</td>
				   <td>1</td>
				   <td></td>
				   <td></td>
				   <td>
					   <span >编辑</span>
					   <span class=>删除</span>
					   
				   </td>
			   </tr> -->
			   
		   </tbody>
	  </table>
	</div>

	<!-- 模态框开始 -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
		<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			<h4 class="modal-title" id="exampleModalLabel">新增栏目信息</h4>
		</div>
		<div class="modal-body">
			<form class="form-horizontal">
			<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label" >栏目名称</label>
			<div class="col-sm-10">
			<input type="email" class="form-control" id="name" >
			</div>
			</div>
			<div class="form-group">
			<label for="inputPassword3" class="col-sm-2 control-label">排序号</label>
			<div class="col-sm-10">
			<input type="text" class="form-control" id="no" >
			</div>
			</div>
			<div class="form-group">
			<label for="inputPassword3" class="col-sm-2 control-label" >栏目介绍</label>
			<div class="col-sm-10">
				<textarea name="description" id="description" cols="30" rows="4"></textarea>
			</div>
			</div>
			</form>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			<button type="button" class="btn btn-default addOk">确定</button>
		</div>
		</div>
		</div>
	</div>
		<!--模态框结束-->
</div>

<style>
	.classify_container .btn-default{
		color:#fff;
		background-color: #2cb5ac;
		font-size: 12px;
	}
	.classify_container table td span:hover{
		cursor: pointer;
	}
</style>
<script>
	var baseUrl='http://47.94.229.139:7788/';
	var id;
    //通过promise封装请求函数
    function getData(type,url){
      var p=new Promise((resolve,reject)=>{
        //执行异步请求
        $.ajax({
          url:url,
          type:type,
          headers:{
            "Authorization":sessionStorage.getItem('token'),
          },
          success:function(data){
            resolve(data);
          }
        })
      })
      return p;
    }
	//查询所有栏目信息
	function getclassifyData(url){
		return getData('get',baseUrl+url).then(function(data){
			console.log(data);
			//数据处理
			data.data.forEach((item)=>{
				$(".classify_container tbody").append(`<tr style="text-align: left;">
					<td>`+item.id+`</td>
					<td>`+item.name+`</td>
					<td>`+item.no+`</td>
					<td>`+item.parentId+`</td>
					<td>`+item.description+`</td>
					<td>
						<span data-toggle="modal" data-target="#exampleModal" class='edit'>编辑</span>
						
						<span class="deleteById">删除</span>
						
					</td>
					</tr>`);
			});
		});
	}
	getclassifyData('category/findAll');
	//删除
	$('.classify_container tbody').on('click','.deleteById',(event)=>{
		//console.log(event.target)
		id=$(event.target).parent().parent().children().eq(0).text();
		//console.log(id);
		//删除当前行
		if (confirm("是否确定删除当前行")){
			getData('get',baseUrl+'category/deleteById?id='+id).then((res)=>{
			alert('删除成功');
				//清空所有tr
				$("tbody").empty();
				//3.刷新页面
				getclassifyData('category/findAll');         
			}).catch((err)=>{
				alert('err.message');
			})
      	}
	});
	$('.add').click(function(){
      $("#name").val('');
      $("#no").val('');
      $('#description').val('');
    })
	//给新增按钮绑定事件
	//console.log($('.addOk'))
    $('.classify_container .addOk').click(function(){
		var name=$('.classify_container #name').val();
		console.log($('.classify_container #name'))
		var no=$('.classify_container #no').val();
		var description=$('.classify_container #description').val();
        if(id){
          var user={
            id:id,
            name:name,
            no:no,
    		description:description,
          }
        }else{
          var user={
            name:name,
    		no:no,
			description:description,
          }
        }
        //发送ajax请求，将数据更新到后台
        $.ajax({
          type:'POST',
          url:baseUrl+'category/saveOrUpdate',
          headers:{
              "Authorization":sessionStorage.getItem("token")
          },
          data:user,
          success:function(data){
            // 关闭模态框
            $("#exampleModal").modal("hide")
            // 重新查询栏目信息
            $('tbody').empty();
            getclassifyData('category/findAll');
          }
        })
      })
	 //查询所有用户信息
	 var classifies;
      $.ajax({
        type:'GET',
        url:baseUrl+'category/findAll',
        headers:{
            "Authorization":sessionStorage.getItem("token")
        },
        success:function(data){
          //console.log(data)
          classifies=data.data;
          //console.log(classifies);
        }
      })
	//给编辑按钮绑定事件
	$('.classify_container tbody').on('click','.edit',(event)=>{
		//获取当前行数据
		id=$(event.target).parent().parent().children().eq(0).text();
		//console.log(id)
		var edit=classifies.filter(function(item){
			if(item.id==id){
			$('#id').val(item.id);
			$('#name').val(item.name);
			$('#no').val(item.no);
			$('#description').val(item.description);
			}
       })
	})	

</script>